<template>
  <div id="mapModule" ref="mapModule" class="map-module"></div>
</template>

<script>
import Anhui from "../../mapdata/anhui/anhui.json";
export default {
  data() {
    return {
       anhuiarr: [
        {
          name: "蚌埠市",
          value: [117.003228, 33.099667],
        },
        {
          name: "合肥市",
          value: [116.953042, 31.86119],
        },
        {
          name: "芜湖市",
          value: [117.930051, 31.226319],
        },
        {
          name: "宣城市",
          value: [118.397995, 30.495667],
        },
        {
          name: "池州市",
          value: [117.139157, 30.296037],
        },
        {
          name: "亳州市",
          value: [116.002939, 33.550338],
        },
        {
          name: "铜陵市",
          value: [117.216576, 30.909935],
        },
        {
          name: "淮北市",
          value: [116.794664, 33.971707],
        },
        {
          name: "淮南市",
          value: [116.818329, 32.347574],
        },
        {
          name: "黄山市",
          value: [117.697325, 29.909239],
        },
        {
          name: "安庆市",
          value: [116.203551, 30.50883],
        },
        {
          name: "滁州市",
          value: [117.670264, 32.533627],
        },
        {
          name: "阜阳市",
          value: [115.250729, 32.956969],
        },
        {
          name: "宿州市",
          value: [117.134084, 33.783891],
        },
        {
          name: "马鞍山市",
          value: [118.507906, 31.569362],
        },
        {
          name: "六安市",
          value: [115.857676, 31.552889],
        },
      ],
      regionsdata: [
        {
          name: "蚌埠市",
          namea: "蚌埠",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "合肥市",
            namea: "合肥",
          littitle:'A',
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        },
        {
          name: "芜湖市",
           namea: "芜湖",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "宣城市",
           namea: "宣城",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "池州市",
           namea: "池州",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "亳州市",
           namea: "亳州",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "铜陵市",
           namea: "铜陵",
          littitle:'A',
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        },
        {
          name: "淮北市",
            namea: "淮北",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "淮南市",
           namea: "淮南",
          littitle:'C',
          itemStyle: {
            color: "rgba(255, 0, 0, 1)", //省份背景色
          },
        },
        {
          name: "黄山市",
           namea: "黄山",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "安庆市",
           namea: "安庆",
          littitle:'A',
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        },
        {
          name: "滁州市",
           namea: "滁州",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "阜阳市",
           namea: "阜阳",
          littitle:'C',
          itemStyle: {
            color: "rgba(255, 0, 0, 1)", //省份背景色
          },
        },
        {
          name: "宿州市",
           namea: "宿州",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "马鞍山市",
           namea: "马鞍山",
          littitle:'B',
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        },
        {
          name: "六安市",
          namea: "六安",
          littitle:'A',
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        },
      ],
    };
  },
  components: {
    Anhui,
  },
  mounted() {
    // this.echartsInit();
    this.rawLine({
      ename: Anhui,
      name: "安徽",
    }); //初始地图
  },
  beforeDestroy() {},
  methods: {
        rawLine(map) {
      //阴影区域
      let option = {
        series: [
          {
            type: "map3D",
            zoom: 1.25,
            selectedMode: "single", //地图高亮单选
            regionHeight: 3, //地图高度
            map: map.ename,
            viewControl: {
              center: [0, 0, 0],
              distance: 340, //地图视角 控制初始大小
              autoRotate: false,
              rotateSensitivity: 0,
              alpha: 60, //视角绕 x 轴，即上下旋转的角度
              // rotateSensitivity: [1, 1],
            },
            //  zoomSensitivity: false,//是否开启缩放和平移/鼠标滑动缩放禁止
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 10, //文字大小
                backgroundColor: "rgba(0,0,0,0)",
              },
              formatter: function(param){
                    var str = param.data.littitle+"\n"+param.data.namea;
                    // console.log(param)
                   return str
               },
               rich: {
                xing: {
                    // height: 16,
                    // width: 16,
                    align: 'center',
                    backgroundColor:'none',
                },
            },

            },
            itemStyle: {
              // areaColor: 'red',
              color: "#2B5890", //地图颜色
              borderWidth: 2, //分界线wdith
              borderColor: "#000", //分界线颜色
            },
            emphasis: {
                show:false,
            //   label: {
            //     show: true, //是否显示高亮
            //     textStyle: {
            //       color: "#fff", //高亮文字颜色
            //     },
            //   },
            //   itemStyle: {
            //     color: "#0489d6", //地图高亮颜色
            //   },
            },
            data: this.regionsdata,
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("mapModule"));
      myChart.showLoading();
      this.$echarts.registerMap(map.ename, map.ename);
      this.$nextTick(() => {
        // 初始化地图
        myChart.setOption(option, false);
        myChart.resize();
        myChart.hideLoading();
      });
      //地图下钻点击事件
      myChart.on("click", (param) => {
        console.log(param);
        let names = param.name;
        // for (let key in this.dataList) {
        //   console.log(this.dataList[key]);
        //   if (names == this.dataList[key].name) {
        //     this.showArea(this.dataList[key], key);
        //     break;
        //   }
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-module {
  width: 1000px;
  height: 1000px;
}
</style>
